import { useRef } from 'react'
import userSearchStore from '@/store/userSearchStore'
export default function Search() {

  const inputRef = useRef<HTMLInputElement|null>(null)

  const search = () => {
    // 得到输入的关键字
    const keyword = inputRef.current?.value
    if (keyword) {
      // 调用userSearchStore的action启动搜索
      userSearchStore.search(keyword)
      
      // 清除输入
      inputRef.current!.value = ''
    }
  }
  return (
    <section className="jumbotron">
      <h3 className="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" placeholder="enter the name you search" ref={inputRef}/>
        <button onClick={search}>Search</button>
      </div>
    </section>
  )
}
